"use client"

import { AuthGuard } from "@/components/auth-guard"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Activity, Bot, Workflow, Plug, TrendingUp, Users } from "lucide-react"

const stats = [
  {
    name: "总工作流",
    value: "24",
    change: "+12%",
    icon: Workflow,
    trend: "up",
  },
  {
    name: "活跃 Agent",
    value: "18",
    change: "+8%",
    icon: Bot,
    trend: "up",
  },
  {
    name: "MCP 连接",
    value: "12",
    change: "+3",
    icon: Plug,
    trend: "up",
  },
  {
    name: "系统用户",
    value: "156",
    change: "+23%",
    icon: Users,
    trend: "up",
  },
]

const recentActivities = [
  {
    id: 1,
    type: "workflow",
    title: "客户服务工作流",
    description: "已成功执行 156 次",
    time: "2 分钟前",
  },
  {
    id: 2,
    type: "agent",
    title: "数据分析 Agent",
    description: "完成数据处理任务",
    time: "15 分钟前",
  },
  {
    id: 3,
    type: "mcp",
    title: "Slack MCP",
    description: "新消息已同步",
    time: "1 小时前",
  },
  {
    id: 4,
    type: "workflow",
    title: "邮件自动化工作流",
    description: "发送了 45 封邮件",
    time: "2 小时前",
  },
]

export default function DashboardPage() {
  return (
    <AuthGuard>
      <DashboardLayout>
        <div className="space-y-6">
          {/* Header */}
          <div>
            <h1 className="text-3xl font-bold tracking-tight">仪表盘</h1>
            <p className="text-muted-foreground mt-2">欢迎回来，这是您的工作流管理概览</p>
          </div>

          {/* Stats Grid */}
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            {stats.map((stat) => (
              <Card key={stat.name}>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
                  <stat.icon className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{stat.value}</div>
                  <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
                    <TrendingUp className="h-3 w-3 text-green-500" />
                    <span className="text-green-500">{stat.change}</span>
                    <span>较上周</span>
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Recent Activity */}
          <div className="grid gap-4 lg:grid-cols-2">
            <Card className="lg:col-span-1">
              <CardHeader>
                <CardTitle>最近活动</CardTitle>
                <CardDescription>系统中的最新动态</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {recentActivities.map((activity) => (
                    <div key={activity.id} className="flex items-start gap-4">
                      <div className="h-9 w-9 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <Activity className="h-4 w-4 text-primary" />
                      </div>
                      <div className="flex-1 space-y-1">
                        <p className="text-sm font-medium leading-none">{activity.title}</p>
                        <p className="text-sm text-muted-foreground">{activity.description}</p>
                        <p className="text-xs text-muted-foreground">{activity.time}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card className="lg:col-span-1">
              <CardHeader>
                <CardTitle>快速操作</CardTitle>
                <CardDescription>常用功能快捷入口</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-3">
                  <button className="flex flex-col items-center justify-center gap-2 rounded-lg border bg-card p-4 hover:bg-accent transition-colors">
                    <Workflow className="h-6 w-6 text-primary" />
                    <span className="text-sm font-medium">创建工作流</span>
                  </button>
                  <button className="flex flex-col items-center justify-center gap-2 rounded-lg border bg-card p-4 hover:bg-accent transition-colors">
                    <Bot className="h-6 w-6 text-primary" />
                    <span className="text-sm font-medium">创建 Agent</span>
                  </button>
                  <button className="flex flex-col items-center justify-center gap-2 rounded-lg border bg-card p-4 hover:bg-accent transition-colors">
                    <Plug className="h-6 w-6 text-primary" />
                    <span className="text-sm font-medium">添加 MCP</span>
                  </button>
                  <button className="flex flex-col items-center justify-center gap-2 rounded-lg border bg-card p-4 hover:bg-accent transition-colors">
                    <Users className="h-6 w-6 text-primary" />
                    <span className="text-sm font-medium">管理用户</span>
                  </button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </DashboardLayout>
    </AuthGuard>
  )
}
